<template>
	<view @click="click" :style="'background-color:'+color" class="box">
		{{text}}
		<!--  扫光  -->
		<view v-if="light" class="light">
		</view>
	</view>
</template>

<script>
	export default{
		props:["text","color","light"]
		,methods:{
			click(){
				this.$emit("click")
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 100%;
		border-radius: 15px;
		width: 40px;
		height: 15px;
		color: #fff;
		border: none;
		text-align: center;
		font-size: 10px;
		position: relative;
		overflow: hidden;
	}
	.light{
		width: 10rpx;
		    height: 100%;
			border-radius: 15px;
		  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(238, 234, 234, 0.568), rgba(255, 255, 255, 0));
		position: absolute;
		 transform: translateY(-200px);
		 transition: all .6s;
		 animation: huaguo 3s infinite;
	}
	@keyframes huaguo{
		100%{
			transform:translateX(10px)
		}
	}
</style>
